<template>
	<view class="box">
		<view class="navbar" :style="{position:headerPosition,top:headerTop}">
			<view class="nav-item" :class="{current: filterIndex === index}" v-for="(item,index) in tabBars" :key="index" @click="clickCtTab(index)">
				 <text>{{item.title}}</text>
			</view>
		</view>
		
		<!-- 评价 -->
		<view class="eva-section">
			<view :class="tabCur == 0 ? 'show' : 'hidden'">
				<view  class="eva-box" v-for="item in goodsList" :key="index">
					<image class="portrait" v-show="item.avatar == ''" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
					<image class="portrait" v-show="item.avatar != ''" :src="item.avatar" mode="aspectFill"></image>
					<view class="right">
						<text class="name" v-show="item.nickname == ''">嘻嘻</text>
						<text class="name" v-show="item.nickname != ''">{{item.nickname}}</text>
						<view class="bot">
							<view class="star" >
								<tui-rate :current="item.star"></tui-rate>
							</view>
							<text class="time">{{item.addTime}}</text>
						</view>
						<view class="con">
							<text>{{item.content}}</text>
							<view class="con-imgs">
								<image v-for="img in item.picList" :key="index" :src="img"></image>
							</view>
						</view>
						
						<view class="reply-wrap">
							<view class="title">掌柜回复：</view>
							<view class="reply-info" :class="{hide:!iSinfo}">
								感谢您的每一个评价，让亲满意而归，买的放心，用的舒心一直是我们的宗旨...
								感谢您的每一个评价，让亲满意而归，买的放心，用的舒心一直是我们的宗旨
								<text @tap="showinfo" v-if="!iSinfo">展开</text>
							</view>
							<text @tap="showinfo" v-if="iSinfo" class="hidebtn">收起</text>
						</view>
						
					</view>
				</view>
			</view>
			
			<view :class="tabCur == 1 ? 'show' : 'hidden'" >
				<view class="eva-box">
					<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
					<view class="right">
						<text class="name">Leo yo</text>
						<view class="bot">
							<text class="attr">规格:一盒(5片装)  数量:1</text>
						</view>
						<view class="bot">
							<view class="star">
								<image src="../../static/temp/evaluate_star.png"></image>
								<image src="../../static/temp/evaluate_star.png"></image>
								<image src="../../static/temp/evaluate_star.png"></image>
							</view>
							<text class="time">2019-04-01</text>
						</view>
						<view class="con">
							<text>朋友一直用这款面么，据说很不错，刚好有新用户福利，试了一下，不要太好哦，完美。</text>
						</view>
						<view class="con-imgs">
							<image src="../../static/temp/evaluate_show.png"></image>
							<image src="../../static/temp/evaluate_show.png"></image>
							<image src="../../static/temp/evaluate_show.png"></image>
							<image src="../../static/temp/evaluate_show.png"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view :class="tabCur == 2 ? 'show' : 'hidden'">
				<view class="eva-box">
					<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
					<view class="right">
						<text class="name">Leo yo</text>
						<view class="bot">
							<text class="attr">规格:一盒(5片装)  数量:1</text>
						</view>
						<view class="bot">
							<view class="star">
								<image src="../../static/temp/evaluate_star.png"></image>
								<image src="../../static/temp/evaluate_star.png"></image>
								<image src="../../static/temp/evaluate_star.png"></image>
							</view>
							<text class="time">2019-04-01</text>
						</view>
						<view class="con">
							<text>朋友一直用这款面么，据说很不错，刚好有新用户福利，试了一下，不要太好哦，完美。</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="no-data">
				<p>~没有更多内容~</p>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				 tabCur:0,
				 iSinfo:false,
				 headerPosition: "fixed",
				 headerTop: "",
				 filterIndex: 0,
				 tabBars:[
				 	{
						id:'0',
				 		title:'全部评论',
				 	},
				 	{
						id:'1',
				 		title:'好评晒图'
				 	},
					{
						id:'2',
						title:'差评'
					},
				 ],
				 goodsList:[]
			}
		},
		onLoad() {
			this.tui.request(
				'/app/goods/commentsList',
				'GET', {
					productId: 1181000,
					page:1,
					limit:20
				},
				false,
				false,
				false,
			).then(res => {
				if (res.errno == 0) {
					this.goodsList = res.data.list
				}
			}).catch(err => {
				console.log(err)
			})
		},
		methods:{
			clickCtTab(index){
				this.tabCur = index;
				if (this.filterIndex === index && index !== 2) {
					return;
				}
				this.filterIndex = index;
				if (index === 2) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			showinfo() {
				this.iSinfo = !this.iSinfo
			},
			//回到顶部
			toTop(){
				uni.pageScrollTo({ 
		　　　　　　scrollTop: 0, duration: 300 
		　　　　}); 
			}
		}
	}
	
</script>

<style lang="scss">
	page{
		background:rgba(250,250,250,1);
		// padding-bottom: 106upx;
	}
	.box{
		
	}
	
	/*头部*/
	.navbar {
		position: fixed;
		left: 0;
		top: var(--window-top);
		display: flex;
		width: 100%;
		height: 80upx;
		background: #fff;
		box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
		z-index: 10;
	
		.nav-item {
			// flex: 1;
			display: flex;
			// justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 12px;
			color: $font-color-dark;
			position: relative;
			margin-left: 15px;
	
			&.current {
				color: #333333;
				font-size: 15px;
	
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #6E609E;
				}
			}
		}
	}
	
	/* 评价 */
	.eva-section{
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		padding-top: 80upx;
		
		.e-header{
			display: flex;
			
			.ct_item{
				font-size:28upx;
				color:rgba(153,153,153,1);
				line-height:40upx;
				margin-right: 35upx;
			}
			.ct_active{
				position: relative;
				font-size:32upx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:40upx;
				// z-index: 1;
				&::after{
					position: absolute;
					bottom: 0upx;
					left: 10upx;
					content:'';
					display: inline-block;
					width:100upx;
					height:10upx;
					background:rgba(110,96,158,1);
					border-radius:5upx;
					// z-index: 0;
				}
			}
		}
	}
	.eva-box{
		display: flex;
		padding: 20upx 0;
		.portrait{
			flex-shrink: 0;
			width: 56upx;
			height: 56upx;
			border-radius: 50%;
		}
		.right{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 10upx;
			.attr{
				font-size: 20upx;
				margin: 10upx 0;
			}
			.name{
				font-size: 28upx;
				color: #333232;
			}
			.con{
				text{
					font-size: 28upx;
					color: #333232;
					margin: 10upx 0;
				}
			}
			.con-imgs{
				width: 100%;
				overflow: hidden;
				image{
					float: left;
					width: 190upx;
					height: 190upx;
					margin-top: 16upx;
					margin-right: 21upx;
					
					&:nth-of-type(3n){
						margin-right: 0;
					}
				}
			}
			.bot{
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color:$font-color-light;
				.star{
					display: flex;
					image{
						width:24upx;
						height: 24upx;
						margin-right: 6upx;
					}
				}
			}
			
			.reply-wrap{
				padding: 0 16upx 20upx;
				margin-top: 20upx;
				background:rgba(250,250,250,1);
				border-radius:10upx;
				.title{
					font-size:28upx;
					font-weight:bold;
					color:rgba(51,50,50,1);
					margin: 20upx 0;
					padding-left: 6upx;
					border-left: 2px solid #6E609E;
				}
				.reply-info{
					position: relative;
					color: #333232;
					font-size: 28upx;
					line-height:34upx;
					text{
						width: 170upx;
						font-size: 28upx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						background: #fff;
						color: #333232;
						font-weight: bold;
						position: absolute;
						bottom: 0upx;
						right: 0upx;
					}
				}
				
				.hidebtn{
					display: flex;
					flex: 1;
					justify-content: flex-end;
					color: #333232;
					font-weight: bold;
					font-size: 28upx;
				}
				.hide {
					word-break: break-word; //换行模式
					overflow: hidden;
					text-overflow: ellipsis; //修剪文字
					display: -webkit-box;
					-webkit-line-clamp: 2; //此处为上限行数
					-webkit-box-orient: vertical;
				}
				
			}
		
		}
	}
	
	.show{
		display: block;
	}
	
	.hidden{
		display: none;
	}
	
	/* 暂无数据 */
	.no-data{
		font-size: 24upx;
		line-height: 40upx;
		padding: 60upx 0;
		text-align: center;
		color: #CCCCCC;
	}
</style>
